<template>
  <scroll-view
    :scroll-y="true"
    @scroll="onScroll"
    style="height: 100vh"
    @scrolltolower="loadMore()"
  >
    <!--    渐变导航栏-->
    <topic-detail-item
      v-if="tableData2 !== null"
      :getDetail="tableData2"
      :isShow="isShow"
      :coverColor="coverColor"
    ></topic-detail-item>
    <!--    tabbar-->
    <view>
      <view
        class="p-5 bg-white flex gap-20"
        center
        :style="{ position: 'sticky', top: '120px', zIndex: 999 }"
      >
        <text
          v-for="item in tabbarData"
          :key="item.id"
          @click="handleClick(item.id)"
          :class="{ active: item.id === tab }"
          >{{ item.name }}
        </text>
      </view>
      <!--    内容列表-->
      <template v-if="tableData.length > 0">
        <topic-detail-tabbar :tabbar-data="tableData"></topic-detail-tabbar>
        <custom-loading :visible="loading">
          <MyDescriptionTip v-if="hasMore"></MyDescriptionTip>
        </custom-loading>
      </template>
    </view>
  </scroll-view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getTopicDetail } from '@/api/topic'
import TopicDetailItem from '@/layout/PageItemComponents/topicDetailItem.vue'
import { initJianBian } from '@/common/utils/jianbian'
import { commonID, commonIDPage } from '@/common/common'
import TopicDetailTabbar from '@/layout/PageItemComponents/topicDetailTabbar.vue'
import { getTopicDetailTabbar } from '@/api/topic'
import type { ApiResponse } from '@/common/requestType'
import type { Data } from '@/common/topic/topicDetailType'
import MyDescriptionTip from '@/layout/components/Tip.vue'
import CustomLoading from '@/layout/components/customLoading.vue'
// 渐变式导航栏的交互数据
const { tableData2, activeId2, loadData2 } = commonID({
  getList: getTopicDetail
})
const { loading, hasMore, tableData, page, loadData, activeId, tab } =
  commonIDPage({
    getList: () => getTopicDetailTabbar(activeId.value, page.value, tab.value),
    onGetListSuccess: (res: ApiResponse<Data>) => {
      if (res.data.data.length == 0) return
      // 数据是否到底部
      hasMore.value = res.data.current_page >= res.data.last_page
      if (page.value === 1) {
        tableData.value = res.data.data
        // console.log(res.data.data)
      } else {
        tableData.value.push(...res.data.data)
      }
      page.value = hasMore.value
        ? res.data.current_page
        : Math.floor(res.data.current_page + 1)
    }
  })
const { onScroll, isShow, coverColor } = initJianBian()
// 点击tabbar切换内容
const handleClick = (id: string) => {
  activeId.value = activeId2.value
  page.value = 1
  tab.value = id
  tableData.value.length = 0
  hasMore.value = false
  loadData()
}
onLoad((query) => {
  if (query && query.id) {
    activeId2.value = query.id
    loadData2()
  }
})
onMounted(() => {
  handleClick(tab.value)
})
const tabbarData = ref([
  {
    name: '热门',
    id: 'hot'
  },
  {
    name: '最新',
    id: 'new'
  }
])
const loadMore = () => {
  if (hasMore.value == true) return
  loadData()
}
</script>
<script lang="ts">
export default {
  name: 'TopicDetail'
}
</script>
<style scoped>
/* 覆盖 van-nav-bar 的背景色 */
:deep(.van-nav-bar) {
  background-color: transparent !important;
}

/* 覆盖 van-nav-bar 内容区域的背景色 */
:deep(.van-nav-bar__content) {
  background-color: transparent !important;
  height: 45px;
  line-height: 45px;
}

.active {
  @apply text-red-500;
}

.scroll-container {
  flex-grow: 1;
  overflow-y: auto; /* 仅在需要时启用滚动 */
}
</style>
